<template>
    <!-- 搜索表单 -->
    <el-form inline="true" class="post-form" style="margin-bottom: 20px">
      <el-form-item style="margin-right: 20px">
        <el-input v-model="params.title" placeholder="请输入帖子标题" style="width: 240px" />
      </el-form-item>
      <el-form-item style="margin-right: 20px">
        <el-select v-model="params.boardId" placeholder="请选择板块" clearable style="width: 180px">
          <el-option
            v-for="board in boardOptions"
            :key="board.boardId"
            :label="board.boardName"
            :value="board.boardId"
          />
        </el-select>
      </el-form-item>
      <el-form-item style="margin-right: 20px">
        <el-select v-model="params.state" placeholder="请选择状态" clearable style="width: 120px">
          <el-option label="待审批" :value="0" />
          <el-option label="审批通过" :value="1" />
          <el-option label="审批失败" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
  
    <!-- 帖子表格 -->
    <el-table
      :data="postList"
      v-loading="loading"
      style="width: 100%"
      border
    >
      <el-table-column prop="postId" label="ID" width="80" />
      <el-table-column prop="title" label="标题" width="200" show-overflow-tooltip />
      <el-table-column prop="boardName" label="所属板块" width="120" />
      <el-table-column prop="nickName" label="作者" width="120" />
      <el-table-column prop="visitCount" label="浏览数" width="90" align="center" />
      <el-table-column prop="replyCount" label="评论数" width="90" align="center" />
      <el-table-column prop="likeCount" label="点赞数" width="90" align="center" />
      <el-table-column label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="getStateType(row.state)">
            {{ getStateText(row.state) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="发布时间" width="180">
        <template #default="{ row }">
          {{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm') }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template #default="{ row }">
          <el-button type="text" @click="showDetail(row)">查看</el-button>
          <el-button 
            v-if="row.state === 0"
            type="text" 
            @click="showApproveDialog(row)"
          >
            审批
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  
    <!-- 分页 -->
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      v-model:current-page="params.pageNum"
      v-model:page-size="params.pageSize"
      :page-sizes="[10, 20, 50, 100]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top: 20px;"
    />
  
    <!-- 帖子详情弹窗 -->
    <el-dialog v-model="detailDialogVisible" title="帖子详情" width="70%">
      <div class="post-detail">
        <h2>{{ currentPost.title }}</h2>
        <div class="post-meta">
          <span>作者: {{ currentPost.nickName }}</span>
          <span>发布时间: {{ dayjs(currentPost.createTime).format('YYYY-MM-DD HH:mm') }}</span>
          <span>板块: {{ currentPost.boardName }}</span>
          <span>状态: 
            <el-tag :type="getStateType(currentPost.state)">
              {{ getStateText(currentPost.state) }}
            </el-tag>
          </span>
        </div>
        <div class="post-content" v-html="currentPost.content"></div>
        
        <div class="post-stats">
          <el-tag>浏览: {{ currentPost.viewCount }}</el-tag>
          <el-tag type="success">点赞: {{ currentPost.likeCount }}</el-tag>
          <el-tag type="info">评论: {{ currentPost.commentCount }}</el-tag>
        </div>
      </div>
      
      <template #footer>
        <el-button @click="detailDialogVisible = false">关闭</el-button>
        <el-button 
          v-if="currentPost.state === 0"
          type="primary" 
          @click="showApproveDialog(currentPost)"
        >
          审批
        </el-button>
      </template>
    </el-dialog>
  
    <!-- 审批弹窗 -->
    <el-dialog v-model="approveDialogVisible" title="帖子审批" width="500px">
      <el-form :model="approveForm" ref="approveFormRef" label-width="100px">
        <el-form-item label="帖子标题">
          <el-input v-model="approveForm.title" disabled />
        </el-form-item>
        <el-form-item label="所属板块">
          <el-input v-model="approveForm.boardName" disabled />
        </el-form-item>
        <el-form-item label="审批操作" prop="state" required>
          <el-radio-group v-model="approveForm.state">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="拒绝原因" prop="reason" v-if="approveForm.state === 2">
          <el-input 
            v-model="approveForm.reason" 
            type="textarea" 
            :rows="3" 
            placeholder="请输入拒绝原因"
            :required="approveForm.state === 2"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="approveDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleApproveSubmit">提交</el-button>
      </template>
    </el-dialog>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted } from 'vue'
  import { 
    getPostListService, 
    updatePostService, 
    getBoardOptionsService
  } from '@/apis/post'
  import dayjs from 'dayjs'
  import { ElMessage } from 'element-plus'
  
  // 搜索参数
  const params = reactive({
    pageNum: 1,
    pageSize: 10,
    title: '',
    boardId: null,
    state: null
  })
  
  // 表格数据
  const postList = ref([])
  const total = ref(0)
  const loading = ref(false)
  const boardOptions = ref([])
  
  // 弹窗相关
  const detailDialogVisible = ref(false)
  const approveDialogVisible = ref(false)
  const currentPost = ref({})
  const approveForm = reactive({
    postId: null,
    title: '',
    boardName: '',
    state: 1, // 1通过 2拒绝
    reason: ''
  })
  const approveFormRef = ref(null)
  
  // 状态文本和样式映射
  const stateMap = {
    0: { text: '待审批', type: 'warning' },
    1: { text: '已通过', type: 'success' },
    2: { text: '已拒绝', type: 'danger' }
  }
  
  // 获取帖子列表
  const getPostList = async () => {
    try {
      loading.value = true
      const res = await getPostListService(params)
      postList.value = res.rows
      total.value = res.total
    } catch (error) {
      console.error('获取帖子列表失败:', error)
      ElMessage.error('获取帖子列表失败')
    } finally {
      loading.value = false
    }
  }
  
  // 获取板块选项
  const getBoardOptions = async () => {
    try {
      const res = await getBoardOptionsService()
      boardOptions.value = res.data
    } catch (error) {
      console.error('获取板块选项失败:', error)
    }
  }
  
  // 初始化加载数据
  onMounted(() => {
    getPostList()
    getBoardOptions()
  })
  
  // 分页处理
  const handleSizeChange = (newSize) => {
    params.pageSize = newSize
    params.pageNum = 1
    getPostList()
  }
  
  const handleCurrentChange = (newPage) => {
    params.pageNum = newPage
    getPostList()
  }
  
  // 搜索和重置
  const onSearch = () => {
    params.pageNum = 1
    getPostList()
  }
  
  const onReset = () => {
    params.pageNum = 1
    params.pageSize = 10
    params.title = ''
    params.boardId = null
    params.state = null
    getPostList()
  }
  
  // 显示详情弹窗
  const showDetail = (row) => {
    currentPost.value = { ...row }
    detailDialogVisible.value = true
  }
  
  // 显示审批弹窗
  const showApproveDialog = (row) => {
    Object.assign(approveForm, {
      postId: row.postId,
      title: row.title,
      boardName: row.boardName,
      state: 1, // 默认选择通过
      reason: ''
    })
    approveDialogVisible.value = true
  }
  
  // 提交审批
  const handleApproveSubmit = async () => {
    try {
      if (approveForm.state === 2 && !approveForm.reason) {
        ElMessage.warning('请填写拒绝原因')
        return
      }
      
      await updatePostService({
        postId: approveForm.postId,
        state: approveForm.state,
        rejectReason: approveForm.state === 2 ? approveForm.reason : ''
      })
      
      ElMessage.success('审批操作成功')
      approveDialogVisible.value = false
      getPostList()
      
      if (detailDialogVisible.value) {
        currentPost.value.state = approveForm.state
      }
    } catch (error) {
      console.error('审批操作失败:', error)
      ElMessage.error('审批操作失败')
    }
  }
  
  // 辅助函数
  const getStateText = (state) => {
    return stateMap[state]?.text || '未知'
  }
  
  const getStateType = (state) => {
    return stateMap[state]?.type || 'info'
  }
  </script>
  
  <style scoped>
  .post-form {
    margin-bottom: 20px;
  }
  
  .post-detail {
    padding: 0 20px;
  }
  
  .post-detail h2 {
    margin-bottom: 15px;
    color: #333;
  }
  
  .post-meta {
    margin-bottom: 20px;
    color: #666;
    font-size: 14px;
  }
  
  .post-meta span {
    margin-right: 15px;
  }
  
  .post-content {
    line-height: 1.8;
    margin-bottom: 20px;
  }
  
  .post-stats {
    margin-top: 20px;
  }
  
  .post-stats .el-tag {
    margin-right: 10px;
  }
  </style>